<template>
  <div>
    <hips-calendar
      v-if="!loading"
      select-type="single"
      :append-data="appendDatas"
      :today-config="{
        color: todayConfigColor,
        dateLabel: todayConfigLabel,
      }"
      @select-single="handleSelectSingle"
    />
    <div class="params">
      <div class="label">参数</div>
      <div class="values">
        <span>今日配置 - Label = {{ todayConfigLabel }}</span>
        <span>今日配置 - Color = {{ todayConfigColor }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Calendar } from '@hips/vue-ui';

import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: { [Calendar.name]: Calendar },
  props: {
    todayConfigLabel: { type: String, default: '今' },
    todayConfigColor: { type: String, default: '#1f8ceb' },
    onClickItem: Object,
    setEventFunction: Function,
    handleChangeOutputParams: Function,
    handleRunEvent: Function,
    changeEventParams: Function,
  },
  data() {
    return {
      dsx: null,
      loading: false,
      appendDatas: [],
    };
  },

  watch: {
    todayConfigLabel(newVal, oldVal) {
      console.log('>>> FIX todayConfigLabel newVal = ', newVal);
      console.log('>>> FIX todayConfigLabel oldVal = ', oldVal);
    },
  },

  mounted() {
    this.dsx = new Dsx({
      name: 'ts-fill',
      fields: [
        { name: 'tianxieren' },
        { name: 'realName' },
        { name: 'tianxieriqi' },
        { name: 'xiangmu' },
      ],
      dataKey: 'content',
      // autoQuery: true,
      paging: true,
      pageSize: 31,
      transport: {
        retrieve: {
          //http://modtestb.saas.hand-china.com/hmde/v1/executor/MOB01_TS/list?tianxieren@query-type=EQUAL&tianxieren==XHZrdVCEquOZTh4iLWLnWCs6anL3HXK6vrcVf8Am-M8==&tianxieriqi@query-type=RANGE&tianxieriqi=2023-07-01 00:00:00,2023-07-31 00:00:00
          url: '/hmde/v1/executor/MOB01_TS/list',
          method: 'GET',
          params: {
            realName: '高志勇',
            'tianxieriqi@query-type': 'RANGE',
            tianxieriqi: '2023-07-01 00:00:00,2023-07-31 00:00:00',
          },
          transformResponse: (data) => {
            let ret;
            try {
              ret = { content: JSON.parse(data) };
            } catch (error) {
              ret = {
                content: data,
              };
            }

            return ret;
          },
        },
      },
    });

    this.init();
    this.setEventFunction('reload', this.reload);
  },

  activated() {
    console.log('>>> activated this.dsx = ', this.dsx);
    this.init();
    this.setEventFunction('reload', this.reload);
  },
  methods: {
    init() {
      this.appendDatas = [];

      this.loading = true;
      this.dsx.records.query();

      this.dsx.ready().then(() => {
        this.appendDatas = this.dsx.records.map((record) => {
          const tianxieriqi = record.get('tianxieriqi');
          const xiangmu = record.get('xiangmu');

          return {
            date: tianxieriqi,
            label: xiangmu,
            color: 'green',
            labelColor: 'green',
            borderColor: 'green',
          };
        });

        this.loading = false;

        console.log('this.appendDatas = ', this.appendDatas);
      });
    },

    handleSelectSingle(data) {
      console.log('>>> handleSelectSingle data = ', data);
      console.log('>>> handleSelectSingle = ', this.onClickItem);

      const { flowCode } = this.onClickItem;

      this.handleChangeOutputParams({ name: 'tianxieriqi', value: data });

      const filled = this.appendDatas.find((item) => {
        return item.date === data;
      });

      console.log('>>> handleSelectSingle filled = ', filled);

      this.handleChangeOutputParams({ name: 'filled', value: !!filled });

      this.$nextTick(() => {
        this.handleRunEvent(flowCode);
      });
    },

    reload() {
      console.log('>>> handleSelectSingle reload');
      this.init();
      return Promise.resolve(true);
    },
  },
};
</script>

<style lang="less" scoped>
.params {
  width: 100%;
  .label {
    font-size: 16px;
    color: var(--primary-color);
    line-height: 18px;
    padding: 16px 16px 0 16px;
  }
  .values {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
  }
}
</style>
